<p>myc01 works!</p>
<!-- angular的机制其实和 微信小程序 和 vue相同 -->

<!-- 基础数据类型 -->
<ul>
  <!-- 这双大括号不就是vue的语法吗，如果你有vue基础 -->
  <li>{{ name }}</li>
  <li>{{ age }}</li>
  <!-- 不同于vue的是，angular的html部分会把bool类型的值转为字符串类型的true和false -->
  <li>{{ married }}</li>
</ul>

<!-- 复杂数据类型 -->
<ul>
  <!-- 数组类型要是直接使用，效果就像扩展运算符一样 -->
  <li>{{ names }}</li>
  <!-- 带上下标可以正常显示 -->
  <li>{{ names[0] }}</li>

  <!-- 你会发现对象类型数据直接变成了[object Object]显示在页面上 -->
  <li>{{ boss }}</li>
  <!-- 带上属性可以正常显示 -->
  <li>{{ boss.name }}</li>
</ul>

<!-- {{}} 是支持数字运算符以及比较运算符的 -->
<ul>
  <li>{{ 1 + 1 }}</li>
  <li>{{ 2 - 1 }}</li>
  <li>{{ 5 * 1 }}</li>
  <li>{{ 1 / 2 }}</li>

  <li>{{ 3 >= 2 }}</li>
  <li>{{ age == 20 }}</li>
  <li>{{ age != 20 }}</li>

  <!-- 甚至三元表达式也是支持的 -->
  <li>{{ age > 30 ? "大于30" : "小于30" }}</li>
</ul>

<!-- 逻辑运算符 -->
<ul>
  <li>{{ 1 && 2 }}</li>
  <li>{{ 0 || 1 }}</li>
  <li>{{ !0 }}</li>
</ul>

<!-- {{}}里也可以使用对象方法 -->
<ul>
  <!-- 比如里面可以用字符串的方法，像js一样 -->
  <li>{{ "hello".slice(2) }}</li>
  <li>{{ "hello".toUpperCase() }}</li>
</ul>

<!-- 类中自定义的方法 -->
<ul>
  <li>{{ showName() }}</li>
</ul>

<!-- 点击事件 -->
<ul>
  <!-- vue中绑定点击事件是@click，angular中为了避嫌，是这样绑定点击事件的，无非就是符号的差别，不过别忘了，方法名后面务必跟上小括号，否则点击不会执行 -->
  <li><button (click)="showClick()">点击事件</button></li>
</ul>

<!-- 属性的绑定 -->
<!--
    现在我想把title属性绑定上我自定义的数据name
    vue里直接 :title="name"就好了，但是angular中不太一样
    是在属性名外面包一层中括号
    -->
<h1 [title]="name">我的名字: {{ 111 }}</h1>

<!-- 特殊的属性[innerHTML] -->
<ul>
  <!-- 
        你还记得vue中有个v-html属性吗，那么这种属性angular里怎么使用呢？
        angular中提供了一个innerHTML属性，搭配上面讲的内容，可以实现这个功能
     -->
  <div [innerHTML]="html"></div>
</ul>

<!-- 特殊的属性：双向数据绑定 -->
<!-- 还记得vue中的v-model吗 -->
<ul>
  <!-- 输入ng-model即可触发代码提示 -->
  <!-- angular默认不加载双向数据绑定这个功能，所以你想用的话，需要在全局配置文件里手动开启此功能 -->
  <li><input type="text" [(ngModel)]="name" /></li>
</ul>

<!-- 样式属性: class和style的使用 -->
<ul>
  <!-- 对象类型属性名不能包含中划线，所以像font-size这种属性，要么写成驼峰，要么加个引号 -->
  <li [ngStyle]="{ color: 'red', fontSize: size + 'px' }">test2</li>

  <!-- 要注意，html中不允许使用++和+=这两个运算符 -->
  <button (click)="size = size + 1">变大</button>

  <!-- ngClass支持动态变更样式，值{样式名:true/false} true代表样式有效，false代表样式无效，比如下面这个案例，danger这个class对于这个按钮就生效了 -->
  <button [ngClass]="{ danger: true }">测试按钮</button>

  <!-- 那现在我想来点复杂的，我想当size这个数据为50px的时候，按钮才添加danger这个class -->
  <button [ngClass]="{danger:size>=30}">测试按钮</button>
</ul>
